<template>
  <div class="body">
    <div class="title">
      <h1>{{ globalTitle }}</h1>
    </div>
    <div class="container">
      <div class="box"></div>
      <div class="container-forms">
        <div class="container-info">
          <div class="info-item">
            <div class="table">
              <div class="table-cell">
                <p>
                  已经有账号了？
                </p>
                <div class="btn" @click="logintoRegister">
                  登录
                </div>
              </div>
            </div>
          </div>
          <div class="info-item">
            <div class="table">
              <div class="table-cell">
                <p>
                  还没有账号？
                </p>
                <div class="btn" @click="logintoRegister">
                  注册
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="container-form">
          <div class="form-item log-in">
            <div class="table">
              <div class="table-cell">
                <el-form>
                  <input placeholder="用户名" type="text" v-model="loginForm.username" />
                  <input placeholder="密码" type="Password" v-model="loginForm.password" />
                  <div class="btn" @click="loginButton">
                    登录
                  </div>
                </el-form>

              </div>
            </div>
          </div>
          <div class="form-item sign-up">
            <div class="table">
              <div class="table-cell">
                <input placeholder="用户名" type="text" v-model="registerForm.username" />
                <input placeholder="密码" type="Password" v-model="registerForm.password" />
                <input placeholder="密码" type="Password" v-model="registerForm.password2" />
                <div class="btn" @click="registerButton">
                  注册
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {useUserConfig as userInfo} from '/@/stores/UserInfoConfig';
import router from "/@/router";

// 新增环境变量引用
const globalTitle = ref(import.meta.env.VITE_GLOBAL_TITLE?.trim());

const loginForm = ref({
  username: '',
  password: ''
});

const registerForm = ref({
  username: '',
  password: '',
  password2: ''
});

const logintoRegister = () => {
  // 点击登录按钮 将container添加log-in类
  let container = document.querySelector('.container') as HTMLElement;
  // 如果container有log-in类则移除log-in类
  if (container.classList.contains('log-in')) {
    container.classList.remove('log-in');
  } else {
    // 如果container没有log-in类则添加log-in类
    container.classList.add('log-in');
  }
}

const ok = () => {
  // 点击注册按钮 将container添加active类
  let container = document.querySelector('.container') as HTMLElement;
  if (container.classList.contains('active')) {
    container.classList.remove('active');
  } else {
    container.classList.add('active');
  }
}

const loginButton = async () => {
  await userInfo().login(loginForm.value);
  ok();
  // 跳转到首页
  router.push({name: 'Home'});
}

const registerButton = async () => {
  await userInfo().register(registerForm.value);
  loginForm.value.username = registerForm.value.username;
  loginForm.value.password = registerForm.value.password;
  ok();
  setTimeout(() => {
    // 跳转到登录页面
    ok();
    setTimeout(() => {
      logintoRegister();
    }, 1000);
  }, 1000);
}

</script>


<style scoped lang="css">
@import './css/style.css';
</style>